<style>
  .div1 {
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 180px;


  }

  .div1::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    bottom: -100%;
    right: -100%;
    background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 100% 100%;
    animation: bgposition 8s infinite linear alternate;
    z-index: -1;
  }

  @keyframes bgposition {
    0% {
      transform: translate(30%, 30%);
    }

    25% {
      transform: translate(30%, -30%);
    }

    50% {
      transform: translate(-30%, -30%);
    }

    75% {
      transform: translate(-30%, 30%);
    }

    100% {
      transform: translate(30%, 30%);
    }
  }
</style>

<div class="div1"></div>
实现原理：
<img src="./bg.gif" alt="">